<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
  <link type="text/css" href="CSS/demo.css" media="screen" charset="utf-8" rel="stylesheet"  />
  <link type="text/css" href="CSS/movingboxes.css" media="screen" charset="utf-8" rel="stylesheet"  />

  <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="js/jquery.movingboxes.js" charset="utf-8"></script>
  <script type="text/javascript">
  $(function(){

   $('#slider-two').movingBoxes({
    startPanel  : 1,     // start with this panel
    width       : 400,   // overall width of movingBoxes
    panelWidth  : .6,    // current panel width adjusted to 50% of overall width
    imageRatio  : 12/9,  // Image ratio set to 16:9
    buildNav     : true, // if true, navigation links will be added
    navFormatter : function(index, panel){ return panel.find('h2 span').text(); } // function which gets nav text from span inside the panel header
   });

   // Example of how to move the panel from outside the plugin, only works on first selector (Use ID instead of class to target other movingboxes).
   // get: var currentPanel = $('.slider').data('movingBoxes').currentPanel(); // returns # of currently selected/enlarged panel
   // set: var currentPanel = $('.slider').data('movingBoxes').currentPanel(2); // scrolls to 2nd panel & returns 2.

   // Report events to firebug console
   $('.slider').bind('initialized initChange beforeAnimation completed',function(e, slider, tar){
    // show object ID + event in the firebug console
    if (window.console && window.console.firebug){
     var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel
     txt += (typeof(tar) == 'undefined') ? '' : ', targeted panel is ' + tar;
     console.debug( txt );
    }
   });

  });
  </script>
</head>
<body>

<div id="header">
    <ul>
        <li style="display:inline;"><a class="readmore" style="text-align:right;text-decoration:none;color:white;position: relative;left:800px;" href="index.jsp">LOGOUT</a></li>
    </ul>
</div>
<div id="head">
	<div id="menu">
		<ul>
			<li><a href="index.jsp">HOME</a></li>
			<li><a href="viewticket.jsp" >View Tickets</a></li>
                        <li><a href="addmovie.jsp" >Add Movie</a></li>
			<li><a href="#">CONTACT US</a></li>
		</ul>
	</div>
</div>


<div id ="mainbody2">
<div id="main2" >
<h2 class="hh" style="text-align:center">Welcome to Classic Cinema's Official Website</h2><br /><br />
<div style="float:left;width:20%;margin:2%;"><h3 class="hh" style="display:block">Featured:&nbsp;&nbsp;Coming Soon!</h3>
    <marquee WIDTH="100%" HEIGHT="60%" BEHAVIOR="SCROLL" DIRECTION="DOWN" scrollamount="3"> <br/><img alt="movie image"  src="rango.jpg" width="120" height="150px" />
<br/>
    <a href="#">View Details</a><br/>
    <img alt="movie image"  src="inception.png" width="120" height="150px" /><br/>
    <a href="#">View Details</a><br/>
   </marquee>
</div>
<div style="float:left;width:55%;background-color:#707070">
    <br />
<table id="tab" style="width:50%;text-align: center;border:0px" align="center" >
    <tr>
        <th colspan="4">Now Showing</th>
     </tr>
    <tr id="cl">
        <td><img src="scarface-2.jpg" width="100" height="130px" />Scarface<br/><a href="timings.jsp">View Details</a></td>
        <td><img src="sh (2).jpg" width="100" height="130px" /><a href="#">View Details</a></td>
        <td><img src="sh (3).jpg" width="100" height="130px" /><a href="#">View Details</a></td>
        <td><img src="sh (1).jpg" width="100" height="130px" /><a href="#">View Details</a></td>
     </tr>
</table>
<br /><br /><br /><br />
<table id="tab" style="width:94.5%;margin-left:3%;">
<tr>
    <th >Coming Attractions</th>
</tr>
</table>
<br />
 <div class="slider" id="slider-two">




   <div class="panel">
    <img src="sh (1).jpg" alt="picture" />
    <h2><span>Sherlock Holmes</span></h2>
    <p>View Details</p>
   </div>

   <div class="panel">
    <img src="sh (2).jpg" alt="picture" />
    <h2><span>The Dark Knight</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
   </div>

   <div class="panel">
    <img src="sh (3).jpg" alt="picture" />
    <h2>News Heading - <span>Lin</span></h2>
    <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
   </div>

  </div>
<br /><br />
</div>
<div style="float:left;width:15%;margin-left:3%;"> <h3 class="hh">This week</h3><p>This week we are going to have discount for tickets that are bought at the start of week</p>
</div>

</div> <!-- end wrapper -->
<div style="clear:right;" />
<br /><br /><br />
</div>

<!--
<div id="footer">
<img src="CSS/Images/foot.jpg" />
</div>
-->
</body>

</html>